import { useEffect, useReducer, useState } from "react"

function reducer(state, action) {
    switch (action.type) {
        case "INC":
            return state + 1
        case "DEC":
            return state - 1
        default:
            return state
    }
}

const Index = () => {

    const [message, setCount] = useState("title")

    useEffect(() => {
        setCount("this")
    }, [])

    const changeCount = () => {
        setCount("this is a message")
    }

    const [state, dispatch] = useReducer(reducer, 0)

    const changeState = () => {
        dispatch({ type: "INC" })
    }

    return (
        <div>
            <div onClick={changeCount}>首页---{message}</div>
            <div onClick={changeState}>state---{state}</div>
        </div>
    )
}

export default Index